<template>
  <div>
    <div class="title">广工清远校友会</div>
    <van-form @submit="onSubmit">
      <div class="item-block">
        <!-- 姓名 -->
        <van-field
          v-model="username"
          name="姓名"
          label="姓名"
          placeholder="请输入您的姓名"
          :rules="[{ required: true }]"
        />
        <!-- 性别 -->
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
      <div class="item-block">
        <!-- 手机号码 -->
        <van-field
          v-model="telephone"
          name="+86"
          label="+86"
          placeholder="请输入手机号码"
          :rules="[{ required: true }]"
        />
        <!-- 毕业年份 -->
        <van-field
          v-model="graduationDate"
          name="毕业年份"
          label="毕业年份"
          placeholder="请输入毕业时间"
          :rules="[{ required: true }]"
        />
        <!-- 专业 -->
        <van-field
          v-model="professional"
          name="专业"
          label="专业"
          placeholder="请输入专业全称"
          :rules="[{ required: true }]"
        />
      </div>
      <div class="item-block">
        <!-- 工作住所 -->
        <van-field
          readonly
          clickable
          name="area"
          :value="workAddress"
          label="工作/住所所在镇区"
          placeholder="点击选择省市区"
          :rules="[{ required: true }]"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <!-- 公司名称或行业 -->
        <van-field
          v-model="companyName"
          name="公司名称或行业"
          label="公司名称或行业"
          placeholder="请输入公司名称或行业"
          :rules="[{ required: true }]"
        />
        <!-- 所属部门 -->
        <van-field
          v-model="department"
          name="所属部门"
          label="所属部门"
          placeholder="请输入所属部门"
          :rules="[{ required: true }]"
        />
        <!-- 职位 -->
        <van-field
          v-model="position"
          name="职位"
          label="职位"
          placeholder="选填"
        />
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">
          {{ isUpdate ? "更新信息" : "申请入会" }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { areaList } from '@vant/area-data'
import { GetUserInfo } from '../../api'
import { GetCookies } from '../../utils/cookie'
import { NANCH5COOKIEKEY } from '../../constants'

export default {
  data() {
    return {
      companyName: '',
      department: '',
      graduationDate: '',
      position: '',
      professional: '',
      username: '',
      sex: '1',
      telephone: '',
      uuid: '',
      workAddress: '',

      // value: '',
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      isUpdate: false
      // text: ''
    }
  },
  mounted() {
    this.uuid = GetCookies(NANCH5COOKIEKEY)
    GetUserInfo().then((r) => {
      const d = r && r.data && r.data.data
      if (d) {
        this.companyName = d.companyName
        this.department = d.department
        this.graduationDate = d.graduationDate
        this.position = d.position
        this.professional = d.professional
        this.sex = d.sex === '男' ? '1' : '0'
        this.telephone = d.telephone
        this.username = d.username
        this.workAddress = d.workAddress
        this.isUpdate = true
      }
    })
  },
  methods: {
    onSubmit() {
      this.$axios({
        method: 'post',
        url: `/user/bind?companyName=${this.companyName}&department=${this.department}&graduationDate=${this.graduationDate}&position=${this.position}
          &professional=${this.professional}&sex=${this.sex}&telephone=${this.telephone}&username=${this.username}&uuid=${this.uuid}&workAddress=${this.workAddress}`
        // url: `/user/bind?companyName=${this.companyName}&department=${this.department}&graduationDate=${this.graduationDate}&position=${this.position}
        //   &professional=${this.professional}&sex=${this.sex}&telephone=${this.telephone}&username=${this.username}&uuid=${this.uuid}&workAddress=${this.workAddress}`,
      }).then((res) => {
        if (res.data.code === 200) {
          const { query } = this.$route
          if (query.activityId) {
            this.$router.push({
              name: 'paymentInfo',
              query: { activityId: query.activityId, cost: query.cost }
            })
          } else {
            this.$toast({
              message: '保存成功',
              onClose: () => {
                this.$router.push({
                  name: 'allActivity',
                  query: { index: 0 }
                })
              }
            })
          }
        }
      })
    },

    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      console.log(this.value)
      this.workAddress = this.value
      this.showArea = false
    }
  }
}
</script>
<style scoped>
.title {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #333;
  line-height: 20px;
  background: #f0f2f5;
  padding: 12px 16px;
}
.item-block {
  margin-bottom: 12px;
}
</style>
